class GreetingElement extends HTMLElement {
    constructor() {
      super();
      this._name = 'Stranger';
      const template = document.querySelector('#my-temp');
      const templateContent = template.content;
  
      this.attachShadow({ mode: 'open' }).appendChild(
        templateContent.cloneNode(true)
      );
    }
  
    connectedCallback() {
      this.addEventListener(
        'click', e => alert(`Hello, ${this._name}!`)
      );
    }
    attributeChangedCallback(attrName, oldValue, newValue) {
      if (attrName === 'name') {
        if (newValue) {
          this._name = newValue;
          console.error(`newValue`,newValue);
        } else {
          this._name = 'Stranger';
        }
      }
    }
  }
  GreetingElement.observedAttributes = ['name'];
  customElements.define('hey-there', GreetingElement);
  